{% extends 'base.html' %}
{% load site_tags %}

{% block title %}Apply — {{ program.title }}{% endblock %}

{% block content %}
<section class="py-5" style="background:#fffaf3;">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-7">
        <div class="mb-4">
          <a href="{% url 'certifications:program_detail' program.slug %}" class="btn btn-outline-secondary btn-sm mb-3">
            <i class="bi bi-arrow-left me-1"></i>Back to certification
          </a>
          <h1 class="h3 fw-bold mb-1">Apply for certification</h1>
          <p class="text-muted mb-0">You’re applying for <strong>{{ program.title }}</strong>. Share your education background to continue.</p>
        </div>

        <div class="card border-0 shadow-sm rounded-4">
          <div class="card-body p-4 p-md-5">
            <div class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom">
              <div>
                <div class="fw-bold">{{ program.title }}</div>
                <div class="small text-muted">
                  Fee: {% format_price program.fee %}
                  {% if program.category %} · {{ program.category.name }}{% endif %}
                </div>
              </div>
            </div>

            <h2 class="h6 fw-bold mb-3">Education background <span class="text-danger">*</span></h2>
            <form method="post" novalidate>
              {% csrf_token %}
              <div class="row g-3">
                <div class="col-md-6">
                  <label class="form-label fw-semibold small">{{ form.qualification.label }}</label>
                  {{ form.qualification }}
                  {% if form.qualification.errors %}<div class="text-danger small">{{ form.qualification.errors.0 }}</div>{% endif %}
                </div>
                <div class="col-md-6">
                  <label class="form-label fw-semibold small">{{ form.last_degree.label }}</label>
                  {{ form.last_degree }}
                  {% if form.last_degree.errors %}<div class="text-danger small">{{ form.last_degree.errors.0 }}</div>{% endif %}
                </div>
                <div class="col-md-4">
                  <label class="form-label fw-semibold small">{{ form.age.label }}</label>
                  {{ form.age }}
                  {% if form.age.errors %}<div class="text-danger small">{{ form.age.errors.0 }}</div>{% endif %}
                </div>
                <div class="col-12">
                  <label class="form-label fw-semibold small">{{ form.work_experience.label }}</label>
                  {{ form.work_experience }}
                  {% if form.work_experience.errors %}<div class="text-danger small">{{ form.work_experience.errors.0 }}</div>{% endif %}
                </div>
              </div>
              <button type="submit" class="btn btn-primary fw-semibold w-100 mt-4 py-2" style="background:linear-gradient(90deg,#d97706,#f59e0b);border:none;">
                <i class="bi bi-award me-1"></i>Continue application
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}